﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DragAndDrop.aspx.cs" Inherits="JQueryWidget.JQueryWeb.DragAndDrop" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css"> 
    .draggable
    {
        width:100px;
        height:100px;
        border:1px solid gray;
        background-color:lightgray; 
    }
    .draggable_container
    {
        width:100%;
        height:100%;
        border:1px solid black;
    }
    .leftpanel
    {
        width:300px;
        height:200px;
        background-color:Blue;
    }
    .droppable_container
    {
        width:200px;
        height:200px;
       <%-- float:right;--%>
        border:1px solid black;
    }
    </style>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <%--Draggable Demo--%>
    <div>
        <div>
            <fieldset>
                <legend>Drag Demonstrate:</legend>
                <div class="draggable_container">
                    <div class="leftpanel">
                    </div>
                    <p class="draggable"> Drag me freely </p>
                </div>
                <div>
                    <label for="">Select Option Value:</label>
                    <select id="optionNameSelect">
                        <option value="disabled" >disabled</option>
                    </select>
                    <br />
                    <input type="button" value="Get" id="GetOptionValueButton"/>
                    <input type="button" value="Revert" id="revertButton"/>
                </div>
            </fieldset> 
        </div> 
    </div>

    <br />
    
    <%--Droppable Demo--%>
    <div>
        <div>
            <fieldset>
                <legend>Droppable Demonstrate:</legend> 
                <div class="draggable_container">                    
                    <p class="draggable"> Drag me freely </p>
                    <div class="droppable_container"> 
                    </div>
                </div>
            </fieldset>
        </div>
        
    </div>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(".draggable").draggable({ disabled: false, scroll: true, containment: "parent", snap: true, opacity: 0.5,
                start: function (event, ui) {
                    var uihelper = ui.helper;
                }
            });
            $(".droppable_container").droppable({
                drop: function (event, ui) { 
                    alert(ui.draggable.attr("class"));
                }
            });
            $("#GetOptionValueButton").click(function () {
                var selectedIndex = $("#optionNameSelect")[0].selectedIndex;
                var value = $(".draggable").draggable("option", $("#optionNameSelect option:[selected=true]").attr("value"));
                alert(value);
            });
            $("#revertButton").click(function () {
                $(".draggable").draggable("option", "revert", true);
            });

        }); 
    </script>
    </form>
</body>
</html>
